{extend name="public/base" /}
{block name="style"}
    <style>
        /* 公告列表特有样式 */
        .notice-list {
            background-color: #fff;
            margin-top: 10px;
        }

        .notice-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notice-item:last-child {
            border-bottom: none;
        }

        .notice-content {
            flex: 1;
            padding-right: 15px;
        }

        .notice-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .notice-new {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #f53f3f;
            margin-right: 6px;
        }

        .notice-time {
            font-size: 12px;
            color: #999;
        }

        .notice-arrow {
            color: #ccc;
            font-size: 16px;
        }

    </style>
{/block}
{block name="content"}
<!-- 头部导航 - 带返回按钮 -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">公告列表</h1>
</div>
<div class='weui-content'>
    <!-- 公告列表 -->
    <div class="notice-list" style="height:90vh; overflow:auto;">
        <!-- 带"新"标识的公告 -->
    </div>

    <!-- 加载更多 -->
    <div class="load-more">
        加载更多
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function() {
        var page = 1;
        var loading = false;  //状态标记
        load(page);
        $(".notice-list").infinite().on("infinite", function() {
            if (loading) {
                return
            }
            loading = true;
            setTimeout(function () {
                $('.load-more').show();
                page = page+1;
                load(page);
                loading = false;
            },1200)

        });
        function load(page) {
            post("/notice-list.html",{page:page,limit:12},function (res){
                   if (res!="") {
                       $(".notice-list").append(res);
                   } else {
                       loading = true;
                       $(".notice-list").append("<div class=\"weui-cells__title\" ><p class='center-div'>已无更多数据</p></div>")
                   }
                $(".load-more").hide();
            })

        }
    });
</script>
{/block}
